<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>medic</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row" style="border: cadetblue 1px solid;padding: 20px;margin-top: 30px">
        <h1>药剂器械出库管理</h1>

        <table id="showTable" class="layui-table">
            <colgroup>
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>物品id</th>
                <th>出库物品名称</th>
                <th>物品作用类型</th>
                <th>出库物品类型</th>
                <th>出库物品作用</th>
                <th>物品数量</th>
            </tr>
            </thead>
            <tbody id="medicT">

            </tbody>
        </table>

        <form class="layui-form" action="">
            <div class="layui-col-md4" style="border: cadetblue 1px solid;padding: 20px">
                <div class="layui-form-item">
                    <label class="layui-form-label">领用小班</label>
                    <div class="layui-input-block">
                        <select name="className" id="className" lay-verify="required">

                        </select>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <button class="layui-btn" type="button" id="checkOut">进行出库</button>
                    <button class="layui-btn layui-bg-orange" type="button" id="buttonAdd">添加新的出库信息</button>
                </div>
            </div>
        </form>
    </div>
</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#date1' //指定元素
        });

        laydate.render({
            elem: '#date2'
        })
    });
</script>

<script>
    layui.use(['table', 'form'], function () {
        let $ = layui.$;
        let layer = layui.layer;
        let table = layui.table;
        let form = layui.form;
        let x = "";
        $.ajax({
            type: "post"
            , url: "/Trees/classManage?method=showAllClass"
            , dataType: 'json'
            , success: function (data) {
                console.log(data)
                for (let i of data) {
                    x += "<option value=" + i.pkId + ">" + i.className + "</option>"
                }
                $('#className').html(x);
                form.render('select');
            }
        })

        $('#checkOut').on('click', function () {
            $(function () {
                //以当前表格的列数进行循环
                $("#showTable tr").each(function (rowIndex) {
                    let pkId = $(this).find("td").first().html();
                    console.log("pkId="+pkId);
                    //获得表格最后一列的数字
                    let num = $(this).find("td").last().html();
                    console.log("num="+num);
                    if(num===""){
                        alert("没有添加数量哦，请先添加具体数字后在进行提交，表单将会被清空！")
                        return;
                    }
                    //得到表格的行数以便进行循环传值
                    let i = $('#medicT').find("tr").length;
                    console.log("length="+i);
                    //获得班级的id
                    let className = $('#className').val();
                    console.log("classId="+className)

                    //如果传入的数量不为0，就进行数据的传输
                    if(num!==null&&pkId!==undefined){
                        let str = "&pkId="+pkId+"&number="+num+"&className="+className
                        console.log(str);
                        $.ajax({
                            type:'post'
                            ,url:'/Trees/medicOut?method=addMany'+str
                        })
                    }
                });
            });
            alert("已出库完成")
            $('#medicT').html("");
        })

        $('#buttonAdd').on('click', function () {
            let a, b, c, d, e, f;
            layer.open({
                type: 2
                // , content: "/Trees/LayUiBac/home/medic/Jump/add.html"//填一个url地址
                , content: "/Trees/LayUiBac/home/medic/Jump/addMedicOut.html"//填一个url地址
                , area: ['600px', '600px']
                , shade: ['0.9', '#393D49']
                , anim: 0
                , maxmin: true
                , btn: ["返回"]
                , yes: function (index, layero) {
                    let body = layer.getChildFrame('body', index);
                    a = body.find("input[name=hide]").val();
                    //将隐藏域的字符串读取并且赋在表上
                    $('#medicT').html(a);
                    console.log(a)
                    layer.close(index);
                }
                , success: function (layero, index) {

                }

            })
        })
    });
</script>
</body>
</html>